<template>
  <div class="product-management-container">
    <!-- 搜索栏 -->
    <div class="search-section shadow-card radius-12 mb-4">
      <el-input
        placeholder="搜索商品名称/sku"
        v-model="productName"
        prefix-icon="el-icon-search"
        @keyup.enter.native="merchantSearch"
        size="medium"
        class="search-input"
      ></el-input>
    </div>

    <!-- 商品列表 -->
    <div class="product-grid">
      <el-card
        v-for="product in tableData"
        :key="product.id"
        class="product-card shadow-card radius-8"
        shadow="hover"
        :style="{cursor: 'pointer'}"
      >
        <!-- 图片预览 - 优化图片处理逻辑 -->
        <div class="image-container">
          <el-image
            :src="getMainImage(product)"
            fit="contain"
            class="product-image"
          >
            <template #error>
              <div class="image-placeholder">
                <i class="el-icon-picture-outline"></i>
              </div>
            </template>
          </el-image>
          <!-- 促销标签 -->
          <el-tag
            v-if="product.discount > 0"
            type="danger"
            class="discount-badge"
          >
            {{ product.discount }}折
          </el-tag>
        </div>

        <!-- 商品信息 -->
        <div class="card-content" @click="viewDetails(product)">
          <!-- 商品名称截断 -->
          <h3 class="product-name ellipsis-2">
            {{ product.productName }}
          </h3>

          <!-- 优化商品描述显示 -->
          <div class="product-meta">
            <div class="product-desc-container">
              <span class="product-desc ellipsis-2">{{ product.description || '暂无描述' }}</span>
              <el-tooltip
                v-if="product.description && product.description.length > 40"
                content="点击查看完整描述"
                placement="top"
              >
                <span class="view-more" @click.stop="showFullDescription(product)">
                  [查看更多]
                </span>
              </el-tooltip>
            </div>
          </div>

          <!-- 价格信息 -->
          <div class="price-info">
            <span class="current-price">￥{{ product.price }}</span>
            <span v-if="product.originalPrice > product.price" class="original-price">
              ￥{{ product.originalPrice }}
            </span>
          </div>

          <!-- 底部信息 -->
          <div class="product-footer">
            <div class="stock-status">
              <el-tag
                :type="product.stockQuantity > 50 ? 'success' : (product.stockQuantity > 0 ? 'warning' : 'danger')"
                size="small"
              >
                {{ product.stockQuantity > 0 ? '库存: ' + product.stockQuantity : '已售罄' }}
              </el-tag>
            </div>
            <!-- 操作按钮 -->
            <div class="action-buttons">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-shopping-cart-2"
                @click.stop="addToCart(product)"
                class="action-btn mr-2"
              ></el-button>
              <el-button
                type="success"
                size="mini"
                icon="el-icon-tickets"
                @click.stop="buyNow(product)"
                class="action-btn"
              ></el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-wrapper">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[16, 32, 48, 64]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        class="pagination-container"
      ></el-pagination>
    </div>

    <!-- 商品详情弹窗 -->
    <el-dialog
      title="商品详情"
      :visible.sync="dialogVisible2"
      width="60%"
      :modal="false"
      class="dialog-style"
    >
      <Info
        :id="productsId"
        @handleDialogClose="handleDialogClose"
      />
    </el-dialog>

    <!-- 完整描述弹窗 -->
    <el-dialog
      title="商品描述"
      :visible.sync="descDialogVisible"
      width="40%"
      center
    >
      <template #content>
        <div class="product-full-desc">{{ currentProductDesc }}</div>
      </template>
      <template #footer>
        <el-button @click="descDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// 保持原有逻辑不变
import {getList} from "@/api/list/products";
import Info from "@/views/list/products/info.vue";

export default {
  name: "products",
  components: {Info},
  data() {
    return {
      tableData: [],
      productName: "",
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 16
      },
      query: {},
      productsId: null,
      loading: false,
      dialogVisible2: false,
      // 新增状态
      descDialogVisible: false,
      currentProductDesc: ''
    };
  },
  watch: {
    id(newVal) {
      if (newVal) this.merchantSearch();
    }
  },
  mounted() {
    this.merchantSearch()
  },
  methods: {
    // 保持原有方法不变
    merchantSearch() {
      this.loading = true;
      getList(this.queryParams, this.query)
        .then((response) => {
          this.tableData = response.rows
          this.total = response.total
        })
        .catch((error) => {
          this.$message.error("获取列表失败");
        })
        .finally(() => {
          this.loading = false;
        });
      this.productName = ""
    },

    viewDetails(product) {
      console.log('点击详情:', product.id);
      this.productsId = product.id;
      this.dialogVisible2 = true;
    },

    handleDialogClose() {
      this.dialogVisible2 = false
      this.merchantSearch();
    },

    addToCart(product) {
      this.$message.success(`已将 ${product.productName} 加入购物车`);
    },

    buyNow(product) {
      this.$message.info(`准备购买 ${product.productName}`);
    },

    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.merchantSearch()
    },

    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.merchantSearch()
    },

    // 新增方法：处理图片列表
    // 新增方法：获取主图
    getMainImage(product) {
      return product.mainImageUrl || product.thumbnail.split(',')[0] || '';
    },

    // 新增方法：显示完整描述
    showFullDescription(product) {
      this.currentProductDesc = product.description || '暂无描述';
      this.descDialogVisible = true;
    }
  }
}
</script>

<style scoped lang="scss">
// 导入Element UI样式
@import url('https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css');

// 定义主题变量
$primary-color: #409eff; // 使用Element UI默认主色
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$text-color: #303133;
$light-text-color: #606266;
$extra-light-text: #909399;
$border-color: #ebeef5;
$bg-color: #f5f7fa;

// 基础样式
.product-management-container {
  padding: 20px;
  background-color: $bg-color;
}

// 搜索区域
.search-section {
  padding: 16px;
}

.search-input {
  max-width: 600px;
  margin: 0 auto;

  .el-input__inner {
    height: 40px;
    border-radius: 20px;
    padding-left: 40px;
    font-size: 14px;

    &:focus {
      border-color: $primary-color;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }

  .el-input__prefix {
    left: 12px;
    font-size: 16px;
  }
}

// 商品网格
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

// 商品卡片
.product-card {
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08);
  }
}

// 图片容器
.image-container {
  position: relative;
  height: 160px;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.05);
  }
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: $extra-light-text;
  background-color: #f5f5f5;
}

// 折扣标签
.discount-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  z-index: 10;
}

// 卡片内容
.card-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  height: calc(100% - 160px);
}

.product-name {
  font-size: 14px;
  font-weight: 500;
  color: $text-color;
  line-height: 1.4;
  margin-bottom: 6px;
}

.ellipsis-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-meta {
  margin-bottom: 8px;
}

.product-desc-container {
  display: flex;
  align-items: center;
  gap: 4px;
}

.product-desc {
  font-size: 12px;
  color: $light-text-color;
  line-height: 1.5;
}

.view-more {
  color: $primary-color;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    text-decoration: underline;
  }
}

.price-info {
  margin-bottom: 12px;

  .current-price {
    font-size: 16px;
    font-weight: 600;
    color: $danger-color;
  }

  .original-price {
    font-size: 12px;
    color: $extra-light-text;
    text-decoration: line-through;
    margin-left: 6px;
  }
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.stock-status {
  .el-tag {
    border-radius: 4px;
    padding: 0 6px;
    height: 22px;
    line-height: 20px;
  }
}

.action-buttons {
  display: flex;
}

.action-btn {
  transition: all 0.2s ease;

  &:hover {
    transform: translateY(-1px);
  }
}

// 分页样式
.pagination-wrapper {
  margin-top: 24px;
  display: flex;
  justify-content: center;

  .pagination-container {
    .el-pagination {
      .el-pager li,
      .btn-prev,
      .btn-next {
        border-radius: 4px;
        margin: 0 2px;
        min-width: 32px;
        height: 32px;
        line-height: 32px;

        &.is-active {
          background-color: $primary-color;
          color: white;
        }
      }

      .el-select .el-input .el-input__inner {
        height: 32px;
      }
    }
  }
}

// 对话框样式
.dialog-style {
  .el-dialog {
    border-radius: 8px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);

    .el-dialog__header {
      padding: 16px 20px;
      background-color: #fafafa;
      border-bottom: 1px solid $border-color;
    }

    .el-dialog__title {
      font-size: 16px;
      font-weight: 500;
    }

    .el-dialog__body {
      padding: 20px;
    }
  }
}

// 商品描述弹窗样式
.product-full-desc {
  font-size: 14px;
  line-height: 1.8;
  color: $text-color;
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid $border-color;
  border-radius: 4px;
}

// 工具类
.shadow-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

.radius-8 {
  border-radius: 8px;
}

.radius-12 {
  border-radius: 12px;
}

.mb-4 {
  margin-bottom: 16px;
}

.mr-2 {
  margin-right: 8px;
}

// 响应式调整
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
  }

  .image-container {
    height: 120px;
  }

  .card-content {
    height: calc(100% - 120px);
    padding: 10px;
  }

  .product-name {
    font-size: 13px;
  }

  .price-info {
    margin-bottom: 8px;

    .current-price {
      font-size: 14px;
    }
  }

  .stock-status .el-tag {
    font-size: 10px;
    height: 18px;
    line-height: 16px;
  }

  .action-btn {
    padding: 0 6px;
    height: 24px;
    line-height: 22px;
    font-size: 12px;
  }
}
</style>
